<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'http://localhost:8080/myweb/listEmp',
            dataType:'json',
            success:function(result){
                if(result.status === 200){
                    var emps = result.data
                    for(var emp of emps){
                        var tr = document.createElement('tr')
                        var tdId = document.createElement('td')
                        var tdName = document.createElement('td')
                        var tdPhone = document.createElement('td')
                        var tdAddress = document.createElement('td')
                        var tdStatus = document.createElement('td')
                        var tdOperate = document.createElement('td')

                        tdId.innerText = emp.id
                        tdName.innerText = emp.name
                        tdPhone.innerText = emp.phone
                        tdAddress.innerText = emp.address
                        tdStatus.innerText = emp.status==1?'启用':'禁用'
                        var btnDelete = document.createElement('button')
                        btnDelete.innerText = '删除'
                        var btnUpdate = document.createElement('button')
                        btnUpdate.innerText = '修改'
                        tdOperate.appendChild(btnDelete)
                        tdOperate.appendChild(btnUpdate)

                        tr.appendChild(tdId)
                        tr.appendChild(tdName)
                        tr.appendChild(tdPhone)
                        tr.appendChild(tdAddress)
                        tr.appendChild(tdStatus)
                        tr.appendChild(tdOperate)
                        document.getElementById('tbody').appendChild(tr)
                    }
                }
            }
        })
    </script>
</head>
<body>
    <h2>员工信息列表</h2>
    <table border="1px" cellspacing="0" width="500px">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody" align="center">
         
        </tbody>
    </table>
</body>
</html>